<!-- 通用空状态提示组件 -->
<template>
  <div class="empty-state-container">
    <div class="empty-image">
      <template v-if="image">
        <img :src="image" :alt="text" />
      </template>
      <template v-else>
        <van-icon name="info-o" size="64" color="#dcdee0" />
      </template>
    </div>
    <div class="empty-text">{{ text }}</div>
    <div v-if="actionText" class="empty-action">
      <van-button 
        type="primary" 
        size="small" 
        @click="$emit('action')"
      >
        {{ actionText }}
      </van-button>
    </div>
  </div>
</template>

<script setup>
// 移除不必要的导入
// import { defineProps, defineEmits } from 'vue';
// 使用内置图标替代图片引用

const emit = defineEmits(['action']);

const props = defineProps({
  // 空状态提示文字
  text: {
    type: String,
    default: '暂无数据'
  },
  // 空状态图片，默认为空字符串，将使用内置图标
  image: {
    type: String,
    default: ''
  },
  // 操作按钮文字，不设置则不显示按钮
  actionText: {
    type: String,
    default: ''
  }
});
</script>

<style scoped>
.empty-state-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  width: 100%;
}

.empty-image {
  width: 120px;
  height: 120px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.empty-text {
  font-size: var(--font-size-medium);
  color: var(--text-color-secondary);
  margin-bottom: 16px;
}

.empty-action {
  margin-top: 8px;
}
</style> 